<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
			width: 200px;
			height: 12.5rem;
			background-color: pink;
			border: 10px dashed lightgreen;
		}
    </style>
    <script>
        // 注册时间的方式
		// 1.ele.on事件类型 = function(){}
		// 2.addEventListener(事件类型，事件处理函数，useCapture)
		// 第三个参数默认是false,冒泡阶段执行
		// 3.attachEvent(事件类型，事件处理函数)
		
		// 1.在注册事件的时候,判断浏览器的注册事件的方式,然后直接使用该
		// 方式进行注册事件
			// 复用性太差
		// 2.将注册事件的代码封装到一个函数中
			// 每次调用该函数,都会进行浏览器能力检测
		// 3.在函数中返回函数,让外部函数只执行一次,判断也就只会执行一次
		// 使用函数内创建的函数返回给外界,就可以重复使用该函数,进行事件的注册
		
		// 封装成函数,问题是每次都会判断
		// function registeEvent(target,type,handler) {
		// 	if(target.addEventListener){
		// 		target.addEventListener(type,handler);
		// 	}else if(target.attachEvent) {
		// 		target.attachEvent("on" + type,handler);
		// 	}else {
		// 		target["on"+type] = handler;
		// 	}
		// 	
		// }
		
		// 使用更好的方式,避免了多次的判断
		// 这里存在的问题就是
		
		// 我们使用统一的方式,进行事件注册
		
		// 1.注册的事件的处理函数中的this指向不一样
		// 使用addEventListener的方式注册点击事件的回调函数中的this
		// 指向target
		// 但是使用attachEvent的方式注册点击事件的回调函数中的this指向
		// window
		
		// 2. 3种注册事件的方式中,回调函数内获取事件对象的方式也是不一致的
		// 要让他们统一
		// 在第二种的事件注册方式(attachEvent)中,手动给handler传递window.event
		
		function createEventRegister() {
			if(window.addEventListener) {
				return function(target,type,handle) {
					// this--->window
					target.addEventListener(type,handle);
				}
			}else if(window.attachEvent) {
				return function(target,type,handle) {
					target.attachEvent("on" + type,function() {
						handler.call(target,window.event);
					});
				}
			}else{
				return function(target,type,handler) {
					target["on" + type] = handler;
				}
			}
		}
		var registeEvent = createEventRegister();
		
		window.onload = function () {
			var div = document.getElementById("div1");
			registeEvent(div,"click",function(e){
				console.log(e);
				console.log(this);
				// this--->该事件的触发对象
				alert("太阳天空照，花儿对我笑，小鸟说：完了");
			})
			
			div.addEventListener("click",function(e){
			           // this
						console.log(e.screenX);
					})
			
			// 		div.attachEvent("onclick",function(){
			// //            this--->window
			// 			window.event.screenX
			// 		})
		}

		
		
		
    </script>
</head>
<body>
<div id="div1">我是一个div，哈哈哈哈<br>
    点我有惊喜哦~~~
</div>
</body>
</html>